<template>
  <view class="goods_list" v-if="goodList">
    <ugo-search></ugo-search>
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      height="88"
      font-size="30"
      active-color="#ea4350"
      bar-width="150"
    ></u-tabs>
    <!-- 综合 -->
    <view class="goods_content">
      <navigator
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
        class="group"
        v-for="item in goodList"
        :key="item.cat_id"
      >
        <u-image
          :src="item.goods_small_logo"
          width="191"
          height="191"
        ></u-image>
        <view class="content">
          <view class="title">{{ item.goods_name }}</view>
          <view class="price">￥{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <!-- 销量 -->
    <!-- 价格 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      goodList: [],
    };
  },
  onLoad(option) {
    // console.log(option);
    const { cid } = option;
    // 封装发送请求的参数
    this.pageConfig = {
      // 关键字
      query: "",
      cid,
      // 页码
      pagenum: 1,
      // 页容量
      pagesize: 10,
    };
    // 发送请求
    this.getGoodList();
  },
  // 滚动条触底事件
  onReachBottom() {
    if (this.goodList.length >= this.total) {
      uni.showToast({
        title: "没有下一页数据",
        icon: "",
      });
      return;
    }
    this.pageConfig.pagenum++;
    // 发送请求
    this.getGoodList();
  },
  // 下拉刷新
  async onPullDownRefresh() {
    this.pageConfig.pagenum = 1;
    this.goodList = [];
    // 发送请求
    await this.getGoodList();
    // 停止下拉刷新,因为请求是异步请求,所以要等待执行完才停止
    uni.stopPullDownRefresh();
  },
  methods: {
    change(index) {
      this.current = index;
    },
    async getGoodList() {
      const res = await this.$u.get("/goods/search", this.pageConfig);
      console.log(res);
      // 数组合并
      this.goodList = [...this.goodList, ...res.goods];
      this.total = res.total;
    },
  },
};
</script>

<style lang="scss" scoped>
.group {
  display: flex;
  padding: 10rpx 15rpx;
  .content {
    margin-left: 30rpx;
    padding: 10rpx 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .price {
      color: $theme-color;
    }
  }
}
</style>